<template>
  <div class="app-container">
    <el-row :gutter="1">
      <el-col :xs="24" :sm="12" :md="9" :lg="9" :xl="9">
        <el-row :gutter="5">
          <el-col :span="6">
            <product-series-cascade @change="productChange" />
          </el-col>
          <el-col :span="5">
            <el-input
              v-model="deviceName"
              clearable
              :placeholder="$t('device')+$t('name')"
              @change="serchNameChange"
            />
          </el-col>
          <el-col :span="5">
            <el-select
              v-model="status"
              :placeholder="$t('status')"
              @change="statusChange"
            >
              <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-button-group>
              <el-button
                v-if="warnDesc"
                icon="el-icon-warning"
                type="primary"
                @click="unWarnDescDevices"
              />
              <el-button
                v-else
                icon="el-icon-warning-outline"
                plain
                @click="warnDescDevices"
              />
              <el-button
                v-if="follow"
                icon="el-icon-star-on"
                type="primary"
                @click="unFocusDevices"
              />
              <el-button
                v-else
                plain
                icon="el-icon-star-off"
                @click="isFocusDevices"
              />
              <el-button
                :icon="showMoreSearch?'el-icon-arrow-up':'el-icon-arrow-down'"
                type="primary"
                @click="showMoreSearch=!showMoreSearch"
              />
            </el-button-group>
          </el-col>
        </el-row>
        <el-row v-show="showMoreSearch" :gutter="5" style="margin-top: 15px">
          <el-col :span="5">
            <el-select
              v-model="phoneStatus"
              :placeholder="$t('card')+$t('status')"
              @change="statusChange"
            >
              <el-option
                v-for="item in phoneStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="19">
            <province-city-cascade @change="provinceCityChange" />
          </el-col>
        </el-row>
        <div
          class="uni-scroll"
          style="height: calc(100vh - 170px);margin-bottom: 5px;margin-top: 5px"
        >
          <div
            v-for="(item,index) in deviceList"
            :key="index"
            @click="deviceClick(item,index)"
          >
            <device-item :device="item" :check="item.deviceCore==device.deviceCore" @refresh-list="pageGetDevice()" />
          </div>
        </div>
        <div style="text-align: center;margin-top: 10px">
          <el-pagination
            small
            background
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total,prev,pager,next,jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="15" :lg="15" :xl="15">
        <div
          class="uni-scroll"
          style="height: calc(100vh - 120px)"
        >
          <sensor-camera-list :device="device" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  listDeviceStatus,
  listPhoneStatus
} from '@/util/common'
import { pageGetDevice } from '@/api/iot/iotDeviceBelongApi'
import SensorCameraList from '@/components/SensorCameraList'
import DeviceItem from '@/components/DeviceItem'
import ProductSeriesCascade from '@/components/ProductSeriesCascade'
import ProvinceCityCascade from '@/components/ProvinceCityCascade'
import {
  getPageSize,
  getSearchDeviceName,
  getSearchDeviceStatus,
  setSearchDeviceName,
  setSearchDeviceStatus
} from '@/util/storage'
export default {
  name: 'ListModel',
  components: {
    SensorCameraList,
    DeviceItem,
    ProductSeriesCascade,
    ProvinceCityCascade
  },
  data() {
    return {
      phoneStatusList: [],
      phoneStatus: null,
      showMoreSearch: false,
      customColors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#67C23A', percentage: 80 },
        { color: '#1989fa', percentage: 100 }
      ],
      status: getSearchDeviceStatus(),
      statusList: [],
      deviceList: [],
      deviceCores: [],
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      provinceId: null,
      cityId: null,
      productId: null,
      seriesId: null,
      device: {},
      deviceName: getSearchDeviceName(),
      dialogLocalVisible: false,
      wxCoreUrl: null,
      dialogWxCoreVisible: false,
      follow: null,
      warnDesc: null,
      hid: null,
      port: null,
      showSetting: false
    }
  },
  created() {
    this.statusList = listDeviceStatus(this)
    const param = this.$route.query
    if (param) {
      if (param.deviceName) {
        this.deviceName = param.deviceName
      }
      if (param.follow === true) {
        this.follow = true
      } else if (param.follow === false) {
        this.follow = false
      }
      if (param.productId) {
        this.productId = param.productId
      }
      if (param.status) {
        this.status = param.status
      }
    }
    this.phoneStatusList = listPhoneStatus(this)
    this.pageGetDevice()
  },
  methods: {
    provinceCityChange(item) {
      this.provinceId = item.provinceId
      this.cityId = item.cityId
      this.currentPage = 1
      this.pageGetDevice()
    },
    isFocusDevices() {
      this.currentPage = 1
      this.follow = true
      this.pageGetDevice()
    },
    unFocusDevices() {
      this.currentPage = 1
      this.follow = null
      this.pageGetDevice()
    },
    warnDescDevices() {
      this.currentPage = 1
      this.warnDesc = true
      this.pageGetDevice()
    },
    unWarnDescDevices() {
      this.currentPage = 1
      this.warnDesc = null
      this.pageGetDevice()
    },
    productChange(val) {
      this.productId = val.productId
      this.seriesId = val.seriesId
      this.currentPage = 1
      this.pageGetDevice()
    },
    serchNameChange() {
      this.currentPage = 0
      this.pageGetDevice()
      setSearchDeviceName(this.deviceName)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetDevice()
    },
    deviceClick(item) {
      this.device = item
    },
    statusChange() {
      this.currentPage = 1
      this.pageGetDevice()
      setSearchDeviceStatus(this.status)
    },
    pageGetDevice() {
      const json = {
        productId: this.productId,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        status: this.status,
        follow: this.follow,
        warnDesc: this.warnDesc,
        phoneStatus: this.phoneStatus,
        deviceName: this.deviceName,
        seriesId: this.seriesId,
        provinceId: this.provinceId,
        cityId: this.cityId
      }
      pageGetDevice(json).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.deviceList = data.data
          if (this.deviceList != null && this.deviceList.length > 0) {
            this.device = this.deviceList[0]
          }
        } else {
          this.deviceList = []
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

  .well {
    background-color: #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  }

</style>
